<template>
	<!-- #ifdef MP-WEIXIN -->
	<view class="container-index">
		<myHeader class="my-header-pos"></myHeader>

		<view>
			<view class="uni-margin-wrap">
				<swiper style="height: 360rpx;border-radius: 40rpx;" class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2500" :duration="2500">
					<swiper-item v-for="item in swiper.image" :key="item.imageUrl" @click="handleBanner(item)">
						<view class="image-con">
							<image class="banner-image" :src="`${constInfo.srcConst}${item.imageUrl}`" style="width: 700rpx" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<view class="super-equity-vip">
			<view class="equity-vip-header">
				<up-divider class="up-divider-sty" textSize="20" textColor="#FFFFFF" lineColor="#FFFFFF" text="超级权益专享"></up-divider>
			</view>
			<view class="equity-vip-image">
				<image style="width: 700rpx" :src="`${constInfo.srcConst}/sxzz/parkBanner.png`" mode="widthFix"></image>
			</view>
		</view>
		<view class="super-equity-hot">
			<view class="equity-vip-header">
				<up-divider class="up-divider-sty" textSize="20" textColor="#FFFFFF" lineColor="#FFFFFF" text="领热门VIP"></up-divider>
			</view>
			<view class="equity-vip-guid">
				<swiper :indicator-dots="true" class="swiper">
					<swiper-item v-for="i in 2" :key="i" :index="i">
						<up-grid :border="false" col="3">
							<up-grid-item @click="btnGoEquityList(item)" v-for="item in noLoginEqityData.internetRights.list[0].cardItem" :key="item.vipTitle">
								<view class="item-vip">
									<view class="list-image">
										<image style="width: 92rpx" :src="`${constInfo.srcConst}${item.vipIcon}`" mode="widthFix"></image>
									</view>
									<view class="list-title">
										{{ item.vipTitle }}
									</view>
									<view class="list-line">
										<up-line length="120rpx" color="#BDD0E3"></up-line>
									</view>
									<view class="list-btn">
										<!-- <image style="width: 106rpx" :src="`${constInfo.srcConst}${item.button}`" mode="widthFix"></image> -->
											<button class="link-go">领取>  </button>
									</view>
								</view>
							</up-grid-item>
						</up-grid>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
	<!-- #endif -->
	<!-- #ifndef MP-WEIXIN -->
	<template v-if="pageData.versionEnum == 'audit'">
		<myHeader class="my-header-pos"></myHeader>
		<auditVue></auditVue>
	</template>
	<template v-else>
		<view class="container-index">
			<myHeader class="my-header-pos"></myHeader>

			<view>
				<view class="uni-margin-wrap">
					<swiper style="height: 360rpx" class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2500" :duration="2500">
						<swiper-item v-for="item in swiper.image" :key="item.imageUrl" @click="handleBanner(item)">
							<view class="image-con">
								<image class="banner-image" :src="`${constInfo.srcConst}${item.imageUrl}`" style="width: 700rpx" mode="widthFix"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<view class="super-equity-vip">
				<view class="equity-vip-header">
					<up-divider class="up-divider-sty" textSize="20" textColor="#FFFFFF" lineColor="#FFFFFF" text="超级权益专享"></up-divider>
				</view>
				<view class="equity-vip-image">
					<image style="width: 700rpx" :src="`${constInfo.srcConst}/sxzz/parkBanner.png`" mode="widthFix"></image>
				</view>
			</view>
			<view class="super-equity-hot">
				<view class="equity-vip-header">
					<up-divider class="up-divider-sty" textSize="20" textColor="#FFFFFF" lineColor="#FFFFFF" text="领热门VIP"></up-divider>
				</view>
				<view class="equity-vip-guid">
					<swiper :indicator-dots="true" class="swiper">
						<swiper-item v-for="i in 2" :key="i" :index="i">
							<up-grid :border="false" col="3">
								<up-grid-item @click="btnGoEquityList(item)" v-for="item in noLoginEqityData.internetRights.list[0].cardItem" :key="item.vipTitle">
									<view class="item-vip">
										<view class="list-image">
											<image style="width: 92rpx" :src="`${constInfo.srcConst}${item.vipIcon}`" mode="widthFix"></image>
										</view>
										<view class="list-title">
											{{ item.vipTitle }}
										</view>
										<view class="list-line">
											<up-line length="120rpx" color="#BDD0E3"></up-line>
										</view>
										<view class="list-btn">
											<!-- <uni-icons type="forward"></uni-icons> -->
											<!-- <image style="width: 106rpx" :src="`${constInfo.srcConst}${item.button}`" mode="widthFix"></image> -->
											<button class="link-go">领取>  </button>
										</view>
									</view>
								</up-grid-item>
							</up-grid>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</template>
	<!-- #endif -->
</template>

<script setup>
import { ref, reactive, onMounted, watch, computed, defineAsyncComponent } from 'vue';
import { onLoad, onPageScroll, onReady } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import initApi from '@/apis/init.js';
import { useUserStore } from '@/store/user.js';
import { getALPhoneNumber, getWXphoneNumber } from '@/utils/login.js';
import { constStore } from '@/store/const.js';
import loginIndexVue from './component/loginIndex.vue';
import noLoginIndexVue from './component/noLoginIndex.vue';
import { useEquityStore } from '@/store/equity.js';
import auditVue from './component/audit.vue';


const { noLoginEqityData } = useEquityStore();
const { constInfo } = constStore();
const { userInfo } = storeToRefs(useUserStore());
const pageData = reactive({
	versionEnum: null
});
const swiper = reactive({
	image: [
		{
			imageUrl: '/sxzz/hht-5.png'
		},
		{
			imageUrl: '/sxzz/nangua-5.png'
		},
		{
			imageUrl: '/sxzz/youku-5.png'
		}
	]
});
onMounted(() => {
	//  release-正式版,trial-体验版,develop-开发版,audit-审核版
});

const initApplyVersion = async () => {
	const res = await initApi.mpVersionCurrent();
	if (res.code == 20000) {
		pageData.versionEnum = res.data;
		userInfo.value.version = res.data
	}
};
initApplyVersion();
const handleBanner = (item) => {
	console.log(item);
};
const btnGoEquityList = (item) => {
	uni.navigateTo({
		url: '/pages/my/orderList'
	});
};


onLoad((query) => {});

/* 阿里小程序 */

/* 微信小程序 */

const handleAuthError = () => {
	console.log('拒绝获取手机号');
};
</script>

<style lang="scss" scoped>
.container-index {
	margin: 0 auto;
	width: 750rpx;
	.my-header-pos {
		position: relative;
	}
	.uni-margin-wrap {
		position: absolute;
		top: 160rpx;
		margin-left: 25rpx;
		width: 700rpx;
		border-radius: 40rpx !important;
		height: 360rpx;
		:deep(swiper-item){
			border-radius: 40rpx !important;
		}
		.banner-image {
			border-radius: 40rpx ;
		}
	}
	.super-equity-vip {
		margin-top: 350rpx;
		width: 700rpx;
		margin-left: 25rpx;

		.equity-vip-header {
			width: 700rpx !important;
			height: 82rpx;
			background: #03111f;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			line-height: 82rpx;

			::v-deep(.up-divider-sty) {
				padding: 0 100rpx;
				box-sizing: border-box;
				margin: 0 auto;
				font-weight: 900;
			}
		}
	}
	.super-equity-hot {
		margin-top: 34rpx;
		width: 700rpx;
		margin-left: 25rpx;
		.equity-vip-header {
			width: 700rpx;
			height: 82rpx;
			background: #03111f;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			line-height: 82rpx;
			::v-deep(.up-divider-sty) {
				padding: 0 100rpx;
				box-sizing: border-box;
				margin: 0 auto;
				font-weight: 900;
			}
		}
		.equity-vip-guid {
			.swiper {
				height: 600rpx;
				.item-vip {
					background-size: 100% 100%;
					background-repeat: no-repeat;
					background-image: url(https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/sxzz/vipcrad_bg.png);
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					margin: 10rpx 0;
					width: 230rpx;
					height: 264rpx;
					box-sizing: border-box;
					.list-image {
						margin: 20rpx 0;
					}
					.list-title {
						font-size: 20rpx;
						// scale: 0.5;
					}
					.list-line {
						margin: 10rpx 0;
					}
					.list-btn {
						margin-bottom: 30rpx;
						.link-go{
							width: 126rpx;
							height: 34rpx;
							
							background: none;
							padding: 0;
							margin: 0;
							background-color: #3B9AF9;
							color: #fff;
							font-size: 20rpx;
							height: 40rpx;
							line-height: 40rpx;
							border-radius: 50rpx;
						}
					}
				}
			}
		}
	}
}
</style>
